<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级格式化上下文</title>
    <style>
        span{
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div>margin塌陷:</div>
    <div>上下各margin20px,应该是40px间隔, 实际只margin20px</div>
    <div>要解决这个问题, 可以在上下两个元素中间插入BFC元素</div>
    <div style="margin-bottom: 20px;background-color: aquamarine;">上</div>
    <div style="display: flow-root;"></div>
    <div style="margin: 20px 0;background-color: aquamarine;">中</div>
    <div style="overflow: auto;"></div>
    <div style="margin: 20px 0;background-color: aquamarine;">下</div>
    <div>
        块级格式化上下文<br/>
        1.style="overflow: auto;  <span>2.style="display: flow-root;"</span><br/>
        3.父元素内有浮动元素, 高度会坍塌, 对父元素设置BFC后解决<br/>
        4.浮动元素会遮挡普通元素, 但是浮动盒区域不会叠加到BFC元素上
    </div>
</body>
</html>